<template>
  <div class="property-tempalte-con table-gl-w">
    <div class="search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
    </div>
    <!-- <div style="width: 100%; background-color: white; padding: 5px 10px">
      <a-row class="grid-demo" style="width: 100%; background-color: white" :gutter="8">
        <a-col :span="4">
          <div>
            <a-cascader @change="search($event, '类目')" check-strictly :options="categoryOptions" :field-names="{ value: 'id', label: 'name' }" v-model="searchValue.categoryId" placeholder="请选择" allow-clear />
          </div>
        </a-col>
        <a-col :span="4">
          <div>
            <a-input-search @clear="search(searchValue.templateNameList, '模板名称')" @search="search($event, '模板名称')" :style="{ width: '280px' }" v-model="searchValue.templateNameList" placeholder="请输入" allow-clear>
              <template #prepend> 模板名称 </template>
              <template #suffix>
                <a-popover position="br" trigger="click" v-model:popup-visible="showPopover">
                  <icon-more-vertical style="cursor: pointer; margin-left: 5px" />
                  <template #content>
                    <a-textarea placeholder="请输入，一行一个" v-model="searchValue.mulTempalte" :style="{ width: '200px', height: '200px' }" />
                    <div class="footer">
                      <div class="fl"> <a-button type="outline" size="mini" @click="searchValue.mulTempalte = ''">清空</a-button> </div>
                      <div class="fr">
                        <a-button type="outline" size="mini" @click="showPopover = false">取消</a-button>
                        <a-button type="outline" size="mini" style="margin-left: 5px" @click="toValue">搜索</a-button>
                      </div>
                    </div>
                  </template>
                </a-popover>
              </template>
            </a-input-search>
          </div>
        </a-col>
      </a-row>
      <ShowSearchItem :list="showTagList" @del="delTag" />
    </div> -->
    <div class="table-gl-con">
      <TableWrap style="margin-top: 10px; flex: 1" @refresh="getList">
        <template #headerLeft>
          <a-button type="primary" size="medium" class="btn" @click="show('add')">添加</a-button>
          <a-button size="medium" class="gray-outline" style="margin: 0 10px" @click="changeStaus(true)">启用</a-button>
          <a-button size="medium" class="gray-outline" @click="changeStaus(false)">禁用</a-button>
        </template>
        <template #tableBody>
          <a-table :loading="loading" class="table-singe-line show-border-table" size="mini" ref="table" :scroll="{ x: '100%', y: '100%' }" @selection-change="selectColumn" row-key="id" :columns="columns" :data="data" :row-selection="rowSelection" :pagination="false">
            <template #columns>
              <a-table-column v-for="item of columns" :align="item.align" :width="item.width" :title="item.title" :data-index="item.dataIndex">
                <template v-if="item.title == '产品类目'" #cell="{ record }">
                  <a-popover>
                    <span class="text-limit" style="display: inline-block; width: 250px">{{ categoryNames(record) }}</span>
                    <template #content>
                      <span>{{ categoryNames(record) }}</span>
                    </template>
                  </a-popover>
                </template>

                <template v-if="item.title == '绑定属性'" #cell="{ record }">
                  <a-popover>
                    <span class="text-limit" style="display: inline-block; width: 250px">{{ propertyText(record) }}</span>
                    <template #content>
                      <span>{{ propertyText(record) }}</span>
                    </template>
                  </a-popover>
                </template>

                <template v-else-if="item.title == '应用场景'" #cell="{ record }">
                  <div v-if="record.scenes == 'prodcut'">产品资料</div>
                  <div v-if="record.scenes == 'purchase'">采购参数</div>
                </template>
                <template v-else-if="item.title == '状态'" #cell="{ record }">
                  <a-switch v-model="record.status" @change="changeStaus($event, record)" />
                </template>

                <template v-else-if="item.title == '创建时间'" #cell="{ record }">
                  {{ $setTime(record.gmtCreate) }}
                </template>
                <template v-else-if="item.title === '操作'" #cell="{ record }">
                  <a-button type="text" @click="show('edit', record)">编辑</a-button>
                  <a-button type="text" style="color: red; margin-left: 10px" @click="del(record)">删除</a-button>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>
  <PropertyTemplateDetail ref="tempalteDetailEl" :detail="detail" @save="getList" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive } from 'vue'
  import ShowSearchItem from '@/components/showSearchItem.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import FilterTable from '@/components/TableFilter.vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { getCategoryList, deletePropertyTemplateList, getPropertyTemplateList, updatePropertyTemplateStatus } from '@/api/product'
  import { treeFindPath } from '@/utils'
  import PropertyTemplateDetail from './tempalteDetail.vue'
  const columns: any = [
    {
      title: '编码',
      dataIndex: 'code',
      align: 'left',
      width: 150,
    },
    {
      title: '模板名称',
      dataIndex: 'name',
      align: 'left',
      width: 150,
    },
    {
      title: '产品类目',
      dataIndex: 'productCatgoryName',
      align: 'left',
      width: 250,
    },
    {
      title: '绑定属性',
      dataIndex: 'type',
      align: 'left',
      width: 250,
    },

    {
      title: '状态',
      dataIndex: 'status',
      align: 'status',
      width: 60,
    },
    {
      title: '应用场景',
      dataIndex: 'scenes',
      align: 'left',
      width: 80,
    },
    {
      title: '创建人',
      dataIndex: 'createUname',
      align: 'left',
      width: 120,
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreate',
      align: 'left',
      width: 150,
    },
    {
      title: '操作',
      dataIndex: 'email',
      align: 'left',
      width: 80,
    },
  ]
  export default defineComponent({
    name: 'PropertyTemplate',
    components: { ShowSearchItem, TableWrap, PropertyTemplateDetail, FilterTable },
    setup() {
      const filterItem = ref([
        {
          type: 'cascader',
          key: 'categoryId',
          optionItems: [],
          keyWidth: '120',
          value: ref(),
          placeholder: '商品分类',
          label: '类目',
          width: 200,
          isMultiple: true,
        },
        {
          type: 'input_search',
          key: 'templateNameList',
          keyWidth: '120',
          value: ref(),
          placeholder: '模版名称',
          label: '模版名称',
          width: 200,
          isMultiple: true,
        },
        {
          type: 'select',
          key: 'scenes',
          optionItems: [
            { label: '产品资料', value: 'prodcut' },
            { label: '采购参数', value: 'purchase' },
          ],
          keyWidth: '120',
          value: ref(),
          placeholder: '应用场景',
          label: '模版名称',
          width: 200,
          isMultiple: true,
        },
      ])
      let searchValue: any = reactive({ categoryId: '', templateNameList: '' })
      const data = ref([])
      const table = ref()
      const tempalteDetailEl = ref()
      let selectRow = reactive([])
      let pageNation = reactive({ total: 30, pageSize: 20, pageNum: 1 })
      const loading = ref(false)
      const rowSelection = reactive({
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false,
      }) as any
      const showPopover = ref(false)
      const detail = ref({ type: '', data: null })
      const categoryOptions = ref([])
      const showTagList: any = reactive([])
      const delTag = (data: any) => {
        let index = showTagList.findIndex((e: any) => e.label == data.label)
        showTagList.splice(index, 1)
        searchValue[data.labelCode] = ''
      }
      const del = (data: any) => {
        let params = {
          idList: new Array(data.id),
        }
        Modal.error({
          title: '删除确认',
          content: '信息删除后无法恢复，确定要删除吗？',
          titleAlign: 'start',
          cancelText: '取消',
          hideCancel: false,
          onBeforeOk: async (done) => {
            const res: any = await deletePropertyTemplateList(params)
            if (res.code == 'SUCCESS') {
              done(true)
              Message.success('删除成功')
              getList()
            }
          },
        })
      }
      const searchByVal = (val: any) => {
        searchValue = val
        getList()
      }
      const categoryList = async () => {
        const res = await getCategoryList({})
        filterItem.value[0].optionItems = res.data
      }
      // const toValue = () => {
      //   searchValue.templateNameList = searchValue.mulTempalte.split('\n').join(',')
      //   search(searchValue.templateNameList, '模板名称')
      //   showPopover.value = false
      // }
      const show = (type: string, data?: any) => {
        detail.value.type = type
        data ? (detail.value.data = data) : (detail.value.data = null)
        tempalteDetailEl.value.visible = true
      }
      const selectColumn = (val: any) => {
        selectRow = val
      }
      // 修改状态
      const changeStaus = async (val: any, data?: any) => {
        let params: any = {
          status: val,
        }
        if (data) {
          params.idList = new Array(data.id)
        } else {
          if (selectRow.length <= 0) {
            return Message.error('请选择数据')
          }
          params.idList = selectRow
        }

        const res: any = await updatePropertyTemplateStatus(params)
        if ((res.code = 'SUCCESS')) {
          Message.success('修改成功')
        }
        if (!data) {
          getList()
          selectRow.forEach((e) => {
            table.value.select(e, false)
          })
        }
      }

      const changePage = (val: number) => {
        pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        pageNation.pageNum = 1
        pageNation.pageSize = val
        getList()
      }

      const getList = async () => {
        let params = {
          ...searchValue,
          pageNum: pageNation.pageNum,
          pageSize: pageNation.pageSize,
        }

        loading.value = true
        const res: any = await getPropertyTemplateList(params)
        if (res.code == 'SUCCESS') {
          pageNation.total = res.data.total
          data.value = res.data.records
        }
        loading.value = false
      }

      const propertyText = (data: any) => {
        let arr: any = []
        data.itemList.forEach((e: any) => {
          arr.push(e.prop.name)
        })
        return arr.join(',')
      }

      const categoryNames = (data: any) => {
        let arr: any = []
        data.categoryList.forEach((e: any) => {
          arr.push(e.productCatgoryName)
        })
        return arr.join(',')
      }

      categoryList()
      getList()
      return { searchValue, searchByVal, filterItem, categoryNames, propertyText, changePage, sizeChange, tempalteDetailEl, table, del, getList, changeStaus, selectColumn, loading, showTagList, delTag, columns, categoryOptions, showPopover, show, detail, data, selectRow, pageNation, rowSelection }
    },
  })
</script>

<style lang="less" scoped>
  .property-tempalte-con {
    height: calc(100vh - @menuAndTabHeight);
    width: 100%;
    // margin: 0 10px;
    box-sizing: border-box;
  }
  .footer {
    overflow: hidden;
    // border-top: 1px solid #999;
    height: 30px;
    line-height: 30px;
  }
</style>
